<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" language="java" %>

<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
    <script type="text/javascript">

        layui.use(['table',"jquery","layer","form","upload"], function() {
            var upload = layui.upload;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;

            $.ajax({
                url:"/guru/select"
                ,data:{page:1,limit:1000000}
                ,type:'post'
                ,success:function (data) {
                   // console.log(data.data)
                    var html="";
                    $.each(data.data,function(index,obj){
                       // console.log(obj.name)
                        console.log(obj)
                        html+="<option value=\""+obj.id+"\">"+obj.name
                            +"</option>"
                    })

                    console.log(html);
                    $("#articleAuthor").html(html)
                    form.render();
                }
            })



            table.render({
                //请求地址
                url: "${pageContext.request.contextPath}/selectArticle"
                //开启分页
                , page: true
                //id
                , toolbar: "#myToolbar"
                , elem: "#myTable"
                //工具栏
                , cols: [
                    [{type: "checkbox", rowspan: 2}
                        , {title: "文章编号", field: "articleId", align: "center"}
                        , {title: "文章名称", field: "articleName", align: "center" }
                        , {title: "首页图片", field: "articleImage", align: "center",templet: "#photoTemplet"}
                        , {title: "文章内容", field: "articleContent", align: "center"}
                        , {title: "作者", field: "guru", align: "center",templet: "#authorTemplet"}
                        , {title: "上传日期", field: "articleDate", align: "center"}
                        , {title: "操作", rowspan: 2, templet: "#myCaozuoTemplet"}
                    ]

                ]
            })

            //监控工具栏事件
            table.on("toolbar(myTableFilter)", function (obj) {
                switch (obj.event) {
                    case 'search': {
                        var a = $("#stuName").val();
                        //alert(a)
                        //重新加载表单
                        table.reload("myTable", {
                            "where": {"name": a}
                        })

                    }
                        break;
                    case "add":
                        $("#mySubmitButton").prop("name","add");
                        $("#mySubmitButton").html("确认添加");
                        //alert("add");

                        $("#articleDate").val("");
                        $("#guruId").val("");
                        $("#articleImage").val("");
                        $("#articleName").val("");
                         $("#articleContent").val("");

                        $("#myPhoto").prop("src","").prop("style","display:none");
                        $("#test1").html(" <i class=\"layui-icon\">&#xe67c;</i>上传图片");



                        layerIndex=layer.open({type:1,content:$("#updateForm"),area: ['350px','500px']});
                        form.render();
                        break;
                }
            })

            //监控表格数据情况
            table.on('tool(myTableFilter)', function (obj) {
                //获取当前行的数据
                //console.log(obj.data)
                //获取点击按钮事件
                //console.log(obj.event);
                switch (obj.event) {

                    case 'edit': {
                        $("[name='file']").val("");
                        $("#mySubmitButton").prop("name","edit");
                        $("#mySubmitButton").html("确认修改");
                       console.log(obj.data)
                        //数据回显

                        $("#articleId").val(obj.data.articleId);
                        $("#articleDate").val(obj.data.articleDate);
                        $("#guruId").val(obj.data.guruId);
                        $("#articleImage").val(obj.data.articleImage);
                        $("#articleName").val(obj.data.articleName);
                        $("#myPhoto").prop("style","");
                        $("#test1").html(" <i class=\"layui-icon\">&#xe67c;</i>修改图片")
                        $("#myPhoto").prop("src",obj.data.articleImage);
                        $("#articleContent").val(obj.data.articleContent);
                       //$("#articleAuthor").val(obj.data.guru.id)
                        console.log("--------------")
                       console.log(obj.data.guruId)
                        // $("option[value='"+obj.data.guruId+"']").prop("selected",false);

                        //$("#articleAuthor [value='"+obj.data.guru.id+"']").prop("select","select")
                        $("[value=\""+obj.data.guruId+"\"]").attr("selected",true);
                        //数据渲染
                        form.render();
                        //打开框
                        //通过弹出层显示修改输入框
                        layerIndex = layer.open({type: 1, content: $("#updateForm"),area: ['350px','500px']});
                        break;
                    }

                    case "delete":
                        // alert("delete");
                      //  console.log(obj.data);
                        $.ajax({
                            url:"/deleteArticle"
                            ,data:{id:obj.data.articleId}
                            ,type:"post"
                            ,success:function(data){
                                if (data.isOk) {
                                    layer.msg("删除成功", {icon: 6})
                                    table.reload("myTable")
                                } else {
                                    layer.msg("删除失败", {icon: 1})

                                }
                            }
                        })
                        break;
                }
            })

            var on = form.on("submit(updateFormFilter)",function (obj){
               layer.close(layerIndex);//关闭修改弹出层
                var path=$("#mySubmitButton").prop("name");
               var toPath="";
               if(path=="edit"){
                  toPath="/updateArticle"
               }else{
                   toPath="/insertArticle"
               }
              // console.log(toPath)
              var formData= new FormData($("#updateForm")[0]);
               $.ajax({
                   url:toPath
                   ,data:formData
                   ,async:false
                   ,processData:false
                   ,contentType:false
                   ,type:"post"
                   ,success:function(data){
                       if (data.isOk) {
                           layer.msg("操作成功", {icon: 6})
                           table.reload("myTable")
                       } else {
                           layer.msg("操作失败", {icon: 1})

                       }
                   }
               })
                return false;
            });


            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,auto: false
                // ,url: '/upload/' //上传接口
                ,choose: function(obj) {
                    //数据回显
                    obj.preview(function (index, file, result) {
                        $("#myPhoto").prop("style","");
                        $("#myPhoto").prop("src",result);


                    });
                }
            });


        })

    </script>

</head>
<body>
<table id="myTable" lay-filter="myTableFilter" ></table>
<%--工具栏模板--%>
<script type="text/html" id="myToolbar">

    <div class="layui-btn-container layui-inline">
        <button class="layui-btn layui-btn-lg layui-btn-danger" lay-event="add">添加</button>
    </div>
</script>
<%--这个是没一行后面对应的按钮--%>
<script type="text/html" id="authorTemplet">
    {{d.guru.name}}
</script>

<%--这个是没一行后面对应的按钮--%>
<script type="text/html" id="myCaozuoTemplet">
    <a class="layui-btn layui-btn-sm" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-sm" lay-event="delete">删除</a>
</script>



<script type="text/html" id="photoTemplet">
    <img src="{{d.articleImage}}" id="" width="120" height="90"/>
</script>



   <%----%>

<%--修改的表单--%>
    <form enctype="multipart/form-data" class="layui-form" id="updateForm" style="display:none;">

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input  id="articleId" name="articleId" type="hidden"   autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-inline">
                <input type="text" name="articleName" id="articleName" required lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
                <select name="guruId" id="articleAuthor" lay-search>
                    <option value="">王子硕</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">首页照片</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <img src="" style="display:none" name="articleImage"  id="myPhoto" width="100" height="80">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">图片上传日期</label>
            <div class="layui-input-inline">
                <input type="text" name="articleDate" id="articleDate" required lay-verify="required" placeholder="请输入图片描述" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
             <div class="layui-input-inline">
                <input type="text" name="articleImage" id="articleImage" type="hidden" required lay-verify="required" placeholder="请输入图片描述" autocomplete="off" class="layui-input">
            </div>
        </div>




        <div class="layui-form-item">
            <label class="layui-form-label">文章内容</label>
            <div class="layui-input-inline">
                <textarea cols="50" rows="50" name="articleContent" id="articleContent" required lay-verify="required"  placeholder="请输入文章内容" autocomplete="off" class="layui-input"></textarea>
            </div>
        </div>


        <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateFormFilter" name="edit" id="mySubmitButton">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
   </form>

    </body>
</html>
